(function(){
    var banner_nav_ul = document.getElementById('banner_nav_ul');
    var bannerNav = document.getElementById('banner-nav');
     //寻找所有menu
     var menus = document.querySelectorAll('.menus-box .menu');
     var bannerLis = document.querySelectorAll('#banner_nav_ul li')

    //事件委托,要用onmouseover，onmouseenter不冒泡
    banner_nav_ul.onmouseover = function(e){
        if(e.target.tagName.toLowerCase() == 'li'){
            //得到触碰的li元素身上的data-n属性
            var t = e.target.getAttribute('data-n');

            // //做排他操作，所有的banner中的li去掉current类名
            // for(var i = 0;i < bannerLis.length;i++){
            //     bannerLis[i].className = bannerLis[i].getAttribute('data-n');
            // }
            // //当前碰到的元素要加current类
            // e.target.className += 'current';

            //寻找匹配的menu
            var themenu = document.querySelector('.menus-box .menu[data-n=' + t + ']');
            
           
            //做一个排他操作，让之前匹配的盒子都去掉类名，只让符合的有current
            for(var i =0;i < menus.length;i++){
                menus[i].className = 'menu';
            }

            //把所有的menu都重新写一下类名，再给匹配的menu加上current
            themenu.className = 'menu current';
        }
    }

    //鼠标离开大盒子之后关闭菜单
    bannerNav.onmouseleave = function(){
        for(var i = 0;i < bannerLis.length;i++){
            bannerLis[i].className = bannerLis[i].getAttribute('data-n');
            menus[i].className = 'menu';
        }
    }
})();